<template>
  <a-drawer
    :width="920"
    closable
    :body-style="{padding:'12px'}"
    placement="right"
    :visible="visible"
    @close="visible=false"
  >
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">职务/用户</div>
      <a-divider type="vertical" style="margin:0 20px;"/>
      <div style="font-size: 12px;color: #333333;">机构名称：{{row_record.name}}</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">唯一编码：798645409878454564</div>
    </div>
    <a-row style="border-bottom: 1px solid #e8e8e8;padding-bottom: 10px;"  class="g-flex">
      <a-col :span="3" >职务列表：</a-col>
      <a-col :span="21"  class="g-flex g-flex-wrap" style="max-height: 180px;overflow-y: auto;">
        <span v-for="item in positionList" :key="item.id" style="margin:0 35px 15px 0;">{{item.name}}</span>
      </a-col>
    </a-row>
    <!--已选择用户-->
    <div style="margin:15px 5px;" class="g-flex g-y-center g-x-between" >
      <span style="font-weight: bold;font-size:18px; color: #333333;">已选择用户</span>
      <a-button v-show="!isEdit" type="primary" icon="edit" @click="clickEdit">编辑</a-button>
      <span v-show="isEdit">
        <a-button type="link" @click="clearSelectUserList">清空</a-button>
        <a-button type="link" @click="cancelEdit" >取消</a-button>
        <a-button type="link" @click="confirmEdit">确认</a-button>
      </span>
    </div>
    <div  class="g-flex g-flex-wrap">
      <div v-for="(item,index) in hasSelectUserList" :key="index"  class="g-flex g-y-center g-x-around item-user">
        <span>{{item.name}}</span>
        <span>({{item.id}})</span>
        <a-icon v-if="isEdit" type="close" @click="closeSelectUserItem(item.id)" />
      </div>
    </div>
    <!--未选择用户-->
    <div v-if="isEdit" style="margin-top: 30px;">
      <div style="margin:15px 5px;" class="g-flex g-y-center g-x-between" >
        <span style="font-weight: bold;font-size:18px; color: #333333;">未选择用户</span>
        <a-button type="link" @click="allSelect" :disabled="this.noSelectUserList.length <= 0">全选</a-button>
      </div>
      <div  class="g-flex g-flex-wrap">
        <div v-for="(item,index) in noSelectUserList" :key="index"  class="g-flex g-y-center g-x-around item-user">
          <a-icon type="plus" @click="addUserItem(item)" />
          <span>{{item.name}}</span>
          <span>({{item.id}})</span>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
export default {
  components:{


  },
  data () {
    return {
      row_record:{},
      tableData:[],
      visible:false,
      isEdit:false,
      positionList:[
        {name:'现场咨询',id:'1291291'},
        {name:'回访',id:'1291292'},
        {name:'电网咨询专员',id:'1291293'},
        {name:'信息管理员',id:'1291294'},
        {name:'院长',id:'1291295'},
        {name:'整形科现场咨询',id:'1291296'},
        {name:'回访专员',id:'1291297'},
        {name:'导医主管',id:'1291298'},
        {name:'咨询助理',id:'1291219'},
        {name:'导医',id:'1291229'},
        {name:'电网咨询主管',id:'1291239'},
        {name:'皮肤科现场主任',id:'1291249'},
        {name:'整形科现场主任',id:'1291259'},
        {name:'总经理',id:'1291269'},
        {name:'副总经理',id:'1291279'},
        {name:'总经理',id:'1291289'},
        {name:'部门经理',id:'1291299'},
        {name:'工作人员',id:'1291210'},

      ],
      hasSelectUserList:[],
      noSelectUserList:[],
      originHasSelectUserList:[
        {name:'波波',id:'1291291'},
        {name:'波波',id:'1291292'},
        {name:'波波',id:'1291293'},
        {name:'波波',id:'1291294'},
        {name:'波波',id:'1291295'},
        {name:'波波',id:'1291296'},
        {name:'波波',id:'1291297'},
        {name:'波波',id:'1291298'},
        {name:'波波',id:'1291219'},
        {name:'波波',id:'1291229'},
        {name:'波波',id:'1291239'},
        {name:'波波',id:'1291249'},
        {name:'波波',id:'1291259'},
        {name:'波波',id:'1291269'},
        {name:'波波',id:'1291279'}
      ],
      originNoSelectUserList:[
        {name:'波波',id:'1291291'},
        {name:'波波',id:'1291292'},
        {name:'波波',id:'1291293'},
        {name:'波波',id:'1291294'},
        {name:'波波',id:'1291295'},
        {name:'波波',id:'1291296'},
        {name:'波波',id:'1291297'},
        {name:'波波',id:'1291298'},
        {name:'波波',id:'1291219'},
        {name:'波波',id:'1291229'},
        {name:'波波',id:'1291239'},
        {name:'波波',id:'1291249'},
        {name:'波波',id:'1291259'},
        {name:'波波',id:'1291269'},
        {name:'波波',id:'1291279'}
      ]

    }
  },
  methods: {
    /**
     * 抽屉展开初始化方法
     * */
    show (record) {
      this.visible = true
      this.row_record=record
      this.hasSelectUserList = [...this.originHasSelectUserList]
      this.noSelectUserList = [...this.originNoSelectUserList]
    },
    /**
     * 点击编辑
     * */
    clickEdit(){
      this.isEdit = true
    },
    /**
     * 清空选择用户
     * */
    clearSelectUserList(){
      this.hasSelectUserList = []
      console.log('111',this.hasSelectUserList)
      console.log('222',this.originHasSelectUserList)
    },
    /**
     * 清空选择用户
     * */
    closeSelectUserItem(id){
      const filterData = this.hasSelectUserList.filter(item => item.id!=id)
      this.hasSelectUserList = filterData
    },
    /**
     * 添加用户
     * */
    addUserItem(user){
      this.hasSelectUserList.push(user)
      const filterData = this.noSelectUserList.filter(item => item.id!=user.id)
      this.noSelectUserList = filterData
    },
    /**
     * 全选-全部添加用户
     * */
    allSelect(){
      // this.hasSelectUserList.push(...this.noSelectUserList)
      this.hasSelectUserList=this.hasSelectUserList.concat(this.noSelectUserList)
      this.noSelectUserList = []
    },
    /**
     * 取消编辑
     * */
    cancelEdit(){
      this.hasSelectUserList = [...this.originHasSelectUserList]
      this.noSelectUserList = [...this.originNoSelectUserList]
      this.isEdit = false
    },
    /**
     * 确认编辑
     * */
    confirmEdit(id){
      this.isEdit = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
/deep/ .ant-tabs-content{
  height: 100%;
}
.position-content{
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 0;
  top: 60px;
}
.info-wrapper{
  height: 100%;
  padding-top: 5px;
  border-top: 1px solid #cccccc;
  .title{
    color: #999999;
    margin-bottom: 15px;
  }
}
.item-user{
  min-width: 130px;
  height: 30px;
  background: #C7E1FC;
  border-radius: 2px;
  border: 1px solid #3399FF;
  color: #3399FF;
  margin-bottom: 15px;
  margin-right: 17px;
}
</style>

